<template>
  <div class="ForgotPwd">
     <el-row type="flex" justify="center">
            <el-col class="ResetPwdOuterBox" :span="7">
              <el-row type="flex" justify="center">
                    <el-col :span="16">
                        <div class="ResetName">
                            <el-input v-if="!getSuccess" v-model="form.email" prefix-icon="el-icon-user" placeholder="请输入邮箱"></el-input>
                            <el-input v-if="getSuccess" v-model="form.email" prefix-icon="el-icon-user" placeholder="请输入邮箱" disabled></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="16">
                        <div class="GetSQ">
                            <el-button type="primary" @click="getSQ">获取密保问题</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" v-if="buttonFlag">
                    <el-col :span="16">
                        <div class="GetSQ">
                            <el-input prefix-icon="el-icon-question" v-model="form.squestionLabel" disabled></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" v-if="buttonFlag">
                    <el-col :span="16">
                        <div class="GetSQ">
                           <el-input v-model="form.sanswer" placeholder="请输入您的答案"></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" v-if="buttonFlag">
                    <el-col :span="16">
                        <div class="GetSQ">
                           <el-input v-model="form.password1" placeholder="请输入新密码" show-password></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" v-if="buttonFlag">
                    <el-col :span="16">
                        <div class="GetSQ">
                           <el-input v-model="form.password2" placeholder="请重新输入新密码" show-password></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" v-if="buttonFlag">
                    <el-col :span="16">
                        <div class="Submit">
                           <el-button type="primary" @click="Submit">提交</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="Return">
                      <el-button type="text" icon="el-icon-back" @click="toLogin">返回登录</el-button>
                    </div>
                  </el-col>
          </el-row>
            </el-col>
        </el-row>
  </div>
</template>

<script>
export default {
    name: "ResetPassword",
    components: {
    // Header,
    },
    data() {
      return {
        buttonFlag: false,
        getSuccess: false,
        form: {
          email: '',
          squestion: '',
          squestionLabel: '',
          sanswer: '',
          password1:'',
          password2:'',
        }
      }
    },
    methods: {
      getSQ() {
        if(this.form.email === "") {
          this.$message.warning("请填写您的邮箱");
          return;
        }

        const formData = new FormData();
        formData.append("email", this.form.email);
        
        this.$axios({
            method: "post",
            url: "/api/getQuestion",
            data: formData,
        })
        .then((res) => {
            console.log(res);
            if(res.data.errno === 900020) {
              this.form.squestion = res.data.data.question;
              this.buttonFlag = !this.buttonFlag;
              this.getSuccess = !this.getSuccess;

              if(this.form.squestion === '1') {
                this.form.squestionLabel = "您最喜欢的颜色？";
              }
              else if(this.form.squestion === '2') {
                this.form.squestionLabel = "您最讨厌的食物？";
              }
              else if(this.form.squestion === '3') {
                this.form.squestionLabel = "您最要好的闺蜜/兄弟？";
              }
              else if(this.form.squestion === '4') {
                this.form.squestionLabel = "您的爱好？";
              }
              else if(this.form.squestion === '5') {
                this.form.squestionLabel = "您的初恋？";
              }
            }
            else {
              this.$message.warning(res.data.msg);
            }
        })
        .catch((err) => {
            console.log(err);
        })
      },
      toLogin() {
        this.$router.push("/login");
      },
      Submit() {
        if (this.form.email === "" || this.form.password1 === "" || this.form.password2 === "" || this.form.squestion === "" || this.form.sanswer === "") {
          this.$message.warning("请填写所有空格");
          return;
        }

        const formData = new FormData();
        formData.append("email", this.form.email);
        formData.append("password", this.form.password1);
        formData.append("password2", this.form.password2);
        formData.append("question", this.form.squestion);
        formData.append("answer", this.form.sanswer);
        
        this.$axios({
            method: "post",
            url: "/api/forgotPassword",
            data: formData,
        })
        .then((res) => {
            console.log(res);
            if(res.data.errno === 900020) {
              this.$message.success(res.data.msg);
              setTimeout(() => {
                    this.$router.push("/login");
                }, 500);
            }
            else {
              this.$message.warning(res.data.msg);
            }
        })
        .catch((err) => {
            console.log(err);
        })
      }
    }
}
</script>

<style scoped>
.ForgotPwd{
  background-color: #efefef;
  height: 100vh;
}
.ResetPwdOuterBox {
    margin-top: 110px;
    /* height: 525px; */
    background: rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow: 0px 0px 10px 5px #d4d4d4;
    padding-top: 20px;
    /* padding-bottom: 5px; */
    text-align: center;
    /* border: 1px solid black; */
}
.ResetName /deep/ .el-input__inner, .GetSQ /deep/ .el-input__inner{
    height: 50px;
}
.ResetName /deep/ .el-input__inner:focus{
  border-color: rgb(70, 70, 207);
}
.GetSQ, .Submit {
  margin-top: 20px;
}
.GetSQ .el-button--primary {
    background-color: rgb(145, 162, 255);
    border: none;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
}
.Submit .el-button--primary {
    background-color: rgb(145, 162, 255);
    border: none;
    height: 50px;
    width: 200px;
    font-size: 16px;
    font-weight: bold;
}
.el-button--primary:hover {
    background-color: rgb(160, 174, 255);
}
.el-button--text {
    color: rgb(109, 109, 109);
}
.el-button--text:hover {
    color: rgb(113, 113, 113);
    text-decoration: underline;
}
.Return {
  /* border: 1px solid black; */
  margin-top: 5px;
  margin-right: 10px;
  float: right;
}
</style>